<template>
  <div class="classify">
    <header @click="classify($event)">
      <div class="up" data-lx="type">
        <div class="type" v-for="p in arrclassify" :key="p.id" :data-type="p.type"
          :class="classifyIs==p.id-1 ? 'on' :''" @click="classifyIs=p.id-1">{{p.name}}</div>
      </div>
      <div class="down downH">
        <ul data-lx="area">
          <li class="type" :class="areaIs==0 ? 'on' :''" @click="areaIs=0" data-type="000">全部</li>
          <li class="type" :class="areaIs==1 ? 'on' :''" @click="areaIs=1" data-type="cn">大陆</li>
          <li class="type" :class="areaIs==2 ? 'on' :''" @click="areaIs=2" data-type="jp">日本</li>
          <li class="type" :class="areaIs==3 ? 'on' :''" @click="areaIs=3" data-type="ko">韩国</li>
          <li class="type" :class="areaIs==4 ? 'on' :''" @click="areaIs=4" data-type="ot">其他</li>
        </ul>
        <ul data-lx="trend">
          <li class="type" :class="trendIs==0 ? 'on' :''" @click="trendIs=0" data-type="000">全部</li>
          <li class="type" :class="trendIs==1 ? 'on' :''" @click="trendIs=1" data-type="1">连载</li>
          <li class="type" :class="trendIs==2 ? 'on' :''" @click="trendIs=2" data-type="2">完结</li>
        </ul>
        <ul data-lx="pay">
          <li class="type" :class="payIs==0 ? 'on' :''" @click="payIs=0" data-type="000">全部</li>
          <li class="type" :class="payIs==1 ? 'on' :''" @click="payIs=1" data-type="1">免费</li>
          <li class="type" :class="payIs==2 ? 'on' :''" @click="payIs=2" data-type="2">付费</li>
          <li class="type" :class="payIs==3 ? 'on' :''" @click="payIs=3" data-type="3">等就免费</li>
        </ul>
        <div class="saix"><span class="jt" @click="foo($event)">^</span><span @click="foo($event)">筛选</span></div>
      </div>
    </header>
    <main v-if="s">
      <router-link v-for="p in AllMH" :key="p.id" :to="{path:'/listNR', query:{caricatureId:p.caricatureId}}">
        <img :src="p.url" :alt="p.name">
        <p>{{p.name}}</p>
        <p>{{p.trend==1?`更新至${p.hua}话`:`[完结]共${p.hua}话`}}</p>
      </router-link>
    </main>
    <div class="my" v-if="!s">此类漫画还没有录入到数据库</div>
  </div>
</template>
<script>
const Qs = require('qs')
const axios = require('axios');
export default {
  name: 'ListView',
  data() {
    return {
      arrclassify: '',
      areaIs: 0,
      trendIs: 0,
      payIs: 0,
      classifyIs: 0,
      is: 0,
      AllMH: '',
      hua: '',
      trend: '',
      obj: {
        type: "000",
        area: "000",
        trend: "000",
        pay: "000",
      },
      s: true
    }
  },
  methods: {
    getArrclassify() {
      fetch('http://127.0.0.1/list/classify')
        .then(response => response.json())
        .then(data => {
          this.arrclassify = data.data
        });
    },
    foo(e) {
      let el = e.target
      if (this.is == 0) {
        el.parentNode.parentNode.className = 'down'
        el.parentNode.querySelector('.jt').style['transform'] = `rotate(0deg)`;
        this.is++
      } else {
        el.parentNode.parentNode.className = 'down downH'
        el.parentNode.querySelector('.jt').style['transform'] = `rotate(180deg)`;
        this.is--
      }
    },
    getAllMH() {
      axios({
        method: 'post',
        url: `http://127.0.0.1:80/nr/allM`,
        data: Qs.stringify(this.obj)
      })
        .then((data) => {
          this.AllMH = data.data
          if (this.AllMH.status == 1) {
            this.s = false
          } else {
            this.s = true
          }
        }).catch((err) => {
          console.log(err);
        })
    },
    classify(e) {
      let el = e.target
      if (el.className == 'type on') {
        let type = el.getAttribute('data-type')
        let lx = el.parentNode.getAttribute('data-lx')
        this.obj[lx] = type
        this.getAllMH()
      }
    }
  },
  mounted() {
    this.getArrclassify();
    this.getAllMH()
  },
}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100%;
  padding-top: 2.6667vw;
  cursor: pointer;

  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 2.6667vw;
    padding-bottom: .5333vw;
    border-bottom: .2667vw #eaeaea solid;

    .on {
      color: #f8aece;
    }

    div {
      padding: .8vw 2.6667vw;
      font-size: 3.2vw;
      color: #6c7482;
    }
  }

  .downH {
    height: 8.5333vw;
  }

  .down {
    position: relative;
    padding-left: 5.3333vw;
    padding-top: 1.3333vw;
    overflow: hidden;

    ul {
      display: flex;

      li {
        padding: .8vw 2.6667vw;
        margin: 1.6vw 0;
        font-size: 3.2vw;
        color: #6c7482;
      }

      .on {
        color: #f8aece;
      }
    }
  }
}

.saix {
  position: absolute;
  bottom: 0vw;
  right: 0vw;
  display: flex;
  height: 4.2667vw;
  cursor: pointer;

  span {
    font-size: 3.4667vw;
    margin-right: .6667vw;
    color: #6c7482;
    height: 100%;
  }

  span:nth-of-type(1) {
    display: inline-block;
    transform: rotate(180deg);
    font-size: 5.3333vw;
  }

  span:nth-of-type(2) {
    display: inline-block;
    margin-right: 2.6667vw;
  }
}

main {
  margin-top: 5.3333vw;
  width: 95%;
  margin: 0 auto;
  display: grid;
  margin-top: 2.6667vw;
  grid-template-columns: 1fr 1fr 1fr;

  a {
    width: 29.8667vw;
    height: 51.2vw;
    color: black;

    p:nth-of-type(1) {
      font-size: 3.7333vw;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-top: 2.6667vw;
    }

    p:nth-of-type(2) {
      font-size: 3.2vw;
      color: #6c7482;
    }

    img {
      display: block;
      width: 27.4667vw;
      height: 37.0667vw;
      margin: 0 auto;
    }
  }
}

.my {
  width: 53.3333vw;
  height: 53.3333vw;
  font-size: 16vw;
  margin: 26.6667vw auto;
}
</style>